<template>
    <view>
		
		<!-- <image class="backImag" mode="aspectFill"
		src="../../static/headPic.jpg"></image> -->
		
		<image class="bgc-img" :style="{backgroundImage: 'url(' + path + ')', width: getPersentageW(100) + 'px' , height: getPersentageH(50) + 'px'}"
			mode="aspectFit"
		></image>
		
		<canvas class="myCanvas"
		:style="{top: getPersentageH(25) +'px', left: slidX+'px',width: sliderBlockWidth + 'rpx', height: sliderBlockWidth +'rpx'}" 
		style="background-color: #DD524D;"
		canvas-id="myCanvas"></canvas>
		<image 
		:style="{
		backgroundImage: 'url(' + showPic + ')',
		top: getPersentageH(canvasH) +'px', 
		left: getSlideW(canvasW) +'px',width: sliderBlockWidth + 'rpx', 
		height: sliderBlockWidth +'rpx'}" 
		 class="showPic"></image>
		{{slidX}}-{{slidY}}<br>
		{{getPersentageW(scrX)}}-{{getPersentageH(scrY)}}<br>
		{{scrX}}-{{scrY}}<br>
		{{showPic}}
		
		<view class="content" style="overflow: hidden; margin-top: 120rpx;">
			<view class="slider-container" :style="{backgroundColor:sliderBlockBg,touchAction: 'none'}">
				<view class="" style="height: 100%;font-size: 26rpx;color: #000;text-align: center;line-height: 90rpx;">
					{{value==successNumber?successText:initText}}
				</view>
				<view class="front" :style="{width: value+'%',backgroundColor:forntBg}">
					
				</view>
				<view class="slider-block" :style="{left:!value?'0':'calc('+value+'% - '+sliderBlockWidth+'rpx)',width:sliderBlockWidth+'rpx'}">
					>>
				</view>
				<slider :value="value" @change="sliderChange" :disabled="disabled" activeColor="transparent" @changing="changing" block-color="transparent" :block-size="35" backgroundColor="transparent" style="position: absolute;top:6rpx;left: 0;z-index: 5;width: 88%;" />
			</view>
		</view>
	
		
    </view>
</template>

<script>
	var _self
	
	export default {
		data() {
			return {
				canvasW: 0, // 截图高度（百分比）（0-50）
				canvasH: 0, // 截图宽度（百分比） （0-100）
				successNumber: 100, //滑动成功百分比
				allowError: 3, //允许误差范围
				scrX: 0, // 截图部分的x轴坐标 单位px 
				scrY: 25, // 截图部分的y轴坐标 
				path: '../../static/test.jpeg',
				showPic: '',
				slidX: 0, // 滑块移动X坐标
				slidY: 100,
				initText: '右滑验证', //未滑动的验证文案
				successText: '验证成功',//验证成功文案
				sliderBlockBg: '#dae2d0',//滑块颜色
				forntBg: 'green',//滑块滑动后的颜色
				sliderBlockWidth: 80, //单位rpx 最大80 这里最好固定死，改了其他参数也要微调
				reset: true, //成功后重置
				value:0,
				disabled:false
			}
		},
		onLoad() {
			_self = this
			this.canvasH = uni.getSystemInfoSync().screenHeight
			this.canvasW = uni.getSystemInfoSync().screenWidth
			// 初始化滑动成功百分比
			this.successNumber = 80
			this.canvasW = 90
			this.canvasH = 25
			// this.scrX = 1*this.successNumber*0.95
		},
		onReady(){
			this.draw()
			this.save_temp()
		},
		computed:{
		},
		methods: {
			
			// 根据百分百计算px  主要用于结算页面高度
			getPersentageH(p){
				p = p /100
				// let h = uni.getSystemInfoSync().screenHeight/(uni.upx2px(100)/100)
				let h = uni.getSystemInfoSync().screenHeight
				return parseInt((h-this.sliderBlockWidth) * p)
			},
			// 根据百分百计算px  主要用于结算页面宽度
			getPersentageW(p){
				p = p /100
				let w = uni.getSystemInfoSync().screenWidth
				return parseInt(w * p)
			},
			// 根据百分百计算px  主要用于结算滑动宽度
			getSlideW(p){
				p = p /100
				var w  = uni.getSystemInfoSync().screenWidth
				var px = uni.upx2px(_self.sliderBlockWidth)
				return parseInt((w-px) * p)
			},
			// 画布方法
			draw(){
				/* 创建canvas实例 */
				var ctx = uni.createCanvasContext('myCanvas')
				/* 绘制背景图 */  //this.path 根据项目中使用到的图片进行赋值
				//top: getPersentageH(25) +'px', left: getSlideW(90) +'px'
				ctx.drawImage(_self.path, -1*_self.getSlideW(_self.canvasW), -1*_self.getPersentageH(_self.canvasH),this.getPersentageW(100),this.getPersentageH(50))
				// /* 设置字体颜色 */
				// ctx.setFillStyle('#F76260')
				// /* 设置字体大小 和字体family */
				// ctx.font=`${uni.upx2px(30)}px Arial`
				// /* 设置字体对齐方式 */
				// ctx.setTextAlign('center')
				// /* 设置文字内容以及 canvas的位置 */
				// ctx.fillText('十五个字十五个字十五个字十五个', _self.canvasW/2, _self.getPersentageH(61))
				// /* 设置头像背景色，用于确定位置 */
				// ctx.setFillStyle('#FBBD08')
				// /* 在画圆截取图片之前保存当前canvas的所有内容 */
				ctx.save()
				// /* 画笔开始 */
				// ctx.beginPath()
				// /* 画圆方法 坐标，坐标，半径，起始位置，结束位置（画圆固定 2 * Math.PI） */
				// ctx.arc(_self.getPersentageW(_self.roundX), _self.getPersentageH(_self.roundY), 61, 0, 2 * Math.PI)
				// ctx.rect(_self.getPersentageW(0),_self.getPersentageH(25),uni.upx2px(80),uni.upx2px(80))
				/* canvas 截取API */
				// ctx.clip()
				/* canvas 连接起始位置API */
				// ctx.fill()
				/* 插入图片 */
				// ctx.drawImage(_self.path,_self.getPersentageW(_self.scrX),_self.getPersentageH(_self.scrY),_self.getPersentageW(100),_self.getPersentageH(50))
				
				/* 截取图片后只能在截取部分现在，这一步是恢复画布 */
				// ctx.restore()
				// /* 放置最下方二维码 */
				// ctx.drawImage(_self.path, uni.upx2px(274), _self.getPersentageH(67),uni.upx2px(204),uni.upx2px(204))
				/* 执行canvas的开始画画方法 */
				ctx.draw()
				this.save_temp()
			},  
			// 保存到相册：
			save_temp(){
				console.log('保存了')
				uni.canvasToTempFilePath({
					canvasId: 'myCanvas',
					success: res => {
						console.log(res.tempFilePath)
						this.showPic = res.tempFilePath
						// uni.saveImageToPhotosAlbum({
						// 	filePath: res.tempFilePath,
						// 	complete: msg => {
						// 		_self.showPic = msg.file
						// 		console.log(msg)
						// 	}
							
						// })
					},
					fail: err => console.log(err)
				})
			},
			
			changing(e){
				this.value=e.detail.value
				// this.slidX = (750-this.sliderBlockWidth-20)/100*this.value
				this.slidX = this.getSlideW(this.value)
				// console.log(this.value)
			},
			sliderChange(e){
				console.log(e.detail.value)
				if(this.successNumber-this.allowError < e.detail.value && e.detail.value < this.successNumber+this.allowError){
					_self.value=e.detail.value
					console.log('验证成功')
					if(!_self.reset){
						_self.disabled=true
						return
					}
					setTimeout(()=>{
						_self.value=0
						_self.slidX=0
					},1500)
				}else{
					_self.value=e.detail.value
					_self.$nextTick(()=>{
						_self.value=0
						_self.slidX=0
					})
				}
				
			}
		
		}
	}
</script>

<style>
	@import url("test.css");
</style>

<style lang="scss">
	.slider-container {
		position: relative;
		border: 2rpx solid #C0C0C0;
		height: 90rpx;
		border-radius: 4rpx;
		overflow: hidden;
		width: 100%;
		/deep/.uni-slider-thumb{
			box-shadow: none;
		}
		.slider-block{
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			color: #787878;
			border-right: 1px solid #cccccc;
			line-height: 80rpx;
			background-color: #fff;
			text-align: center;
			max-width: 80rpx;
		}
		.front{
			height:100%;
			position:absolute;
			top:0;left:0;
			opacity:0.8;
		}
	}
	
</style>
